<!--
 * @Description:  dataDownload- 资料下载
 * @Author: your name
 * @Date: 2024-02-23
 * @LastEditTime: 2024-02-23
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="dataDownload">
    <div class="top">
      <span
        :class="{ act: cid == i }"
        @click="chooseType(e, i)"
        v-for="(e, i) in dataType"
        :key="i"
      >
        {{ e.name }}
      </span>
    </div>

    <div class="allCheck">
      <div class="left">
        <el-checkbox v-model="isChooseAll"> 全选 </el-checkbox>
        <p>已选22个</p>
      </div>
      <button class="download" @click="downloadSelection">下载</button>
    </div>

    <div class="chooseBox" v-if="cid == 0">
      <div class="box">
        <span>项目：</span>
        <p
          v-for="(item, index) in projectList"
          :class="{ act: phaseId == index }"
          :key="item.id"
          @click="getxuan(item.id, index)"
        >
          {{ item.name }}
        </p>
      </div>
      <div class="box">
        <span>级别：</span>
        <p
          v-for="(e, i) in chooseList"
          :class="{ act: subjectId == i }"
          :key="i"
          @click="getxuan2(e.id, i)"
        >
          {{ e.name }}
        </p>
      </div>
    </div>

    <div class="downloads">
      <div class="item" v-for="(item, index) in phaseArrList" :key="index">
        <div class="downloadInfo">
          <el-checkbox v-model="item.isChoose"></el-checkbox>
          <span class="name"> {{ index + 1 }}、{{ item.title }} </span>
          <img src="@/assets/images/logo_pdf1.png" alt="" />
        </div>
        <a :href="item.url" target="_blank">
          <img src="@/assets/images/logo_download1.png" alt="" />
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { getCateZhike, getLevel, getListZhike } from '@/api/download'
export default {
  name: 'dataDownload',
  data() {
    return {
      cid: 0,
      num: 0,
      dataType: [
        { name: '科目讲义', id: 1 },
        { name: '资料下载', id: 2 }
      ],
      dataArr: [],
      allCheck: false,
      phaseArrList: [],
      phaseId: 0,
      subjectId: 0,
      cateId: 1,
      levelId: 1,
      chooseList: [],
      projectList: []
    }
  },
  created() {
    this.proLevel()
    this.getDownLevel(1)
    this.downZiliao()
  },
  // 计算属性
  computed: {
    isChooseAll: {
      get() {
        return this.phaseArrList.every((item) => item.isChoose)
      },
      set(val) {
        this.phaseArrList.forEach((item) => (item.isChoose = val))
      }
    }
  },

  methods: {
    async proLevel() {
      const { data: data } = await getCateZhike()
      this.projectList = data.data
    },
    getDownLevel(cateId) {
      getLevel({ cate_id: cateId }).then(({ data: data }) => {
        this.chooseList = data.data
      })
    },
    async downZiliao() {
      let _that = this
      let ziliao = {
        page: 1,
        level_id: _that.levelId,
        cate_id: _that.cateId
      }
      const { data: data } = await getListZhike(ziliao)
      data.data.list.map((ele, index) => {
        _that.$set(data.data.list[index], 'isChoose', false)
        return ele
      })
      _that.phaseArrList = data.data.list
    },
    chooseType(id, index) {
      this.cid = index
    },
    getxuan(id, index) {
      this.phaseId = index
      this.cateId = id
      this.getDownLevel(id)
      this.downZiliao()
    },
    getxuan2(id, i) {
      this.levelId = id
      this.subjectId = i
      this.downZiliao()
    },
    downloadSelection() {
      // 1. 过滤得到选中数据 (filter返回true/false)
      const checkedList = this.phaseArrList.filter((it) => it.isChoose)
      console.log(checkedList)
      // 3. 清空列表数据选中状态
      this.phaseArrList.forEach((it) => (it.isChoose = false))
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/dataDownload.scss';
</style>
